<template>
  <el-container>
    <el-main>
      <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">基本信息</span>
      </div>
      <el-form ref="sysTemplateForm" :model="sysTemplateForm" :rules="rules" label-width="80px">
        <el-col :span="14">
          <el-form-item label="消息类型" prop="tplType">
            <el-col :span="12">
              <el-select v-model="sysTemplateForm.tplType" placeholder="请选择类型">
                <el-option label="通知" value="2" />
                <el-option label="邮箱" value="1" />
                <el-option label="短信" value="0" />
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="模板名字" prop="tplName">
            <el-input v-model="sysTemplateForm.tplName"></el-input>
          </el-form-item>
          <el-form-item label="消息内容" prop="tplContent">
            <el-input type="textarea" :autosize="{ minRows: 5}" v-model="sysTemplateForm.tplContent"></el-input>
          </el-form-item>
          <el-form-item label="模板键值">
            <el-input v-model="sysTemplateForm.tplKey"></el-input>
          </el-form-item>
          <el-form-item label="模板ID">
            <el-input v-model="sysTemplateForm.tplId"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="sysTemplateForm.remark"></el-input>
          </el-form-item>
          <el-form-item class="addBotton">
            <el-button type="primary" :loading="loading" @click="updateSysPost('sysTemplateForm')">保存修改</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
  import {find,update} from '@/api/sysTemplate'
  import utils from '../../utils/utils.js'
  import { EventBus } from '@/api/eventBus'
  export default {
    name:'sysTemplate-edit',
    data() {
      return {
        sysTemplateForm: {
          id:'',
          tplType:'',
          tplKey:'',
          tplName:'',
          tplContent:'',
          remark:'',
          tplId:''
        },
        loading: false,
        rules: {
          tplName: [
            { required: true, message: '请输入消息名称', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          tplType: [
            { required: true, message: '请选择消息类型', trigger: 'blur' }
          ],
          tplContent: [
            { required: true, message: '请输入消息内容', trigger: 'blur' }
          ],
        }
      };
    },
    watch:{ // 路由地址不变的情况下,如果id变化则重新获取数据
      $route (newVal, oldVal) {
          console.log(newVal);
        if (newVal.name=='sysTemplate-edit' && newVal.query.id!=this.id) {
          this.information()
        }
      }
    },
    created(){
      if (!utils.isNull(this.$route.query.id)){
        this.information()
      }
    },
    methods: {
      information(){
        this.sysTemplateForm.id = this.$route.query.id
        var _this = this
        find(_this.sysTemplateForm.id).then(response =>{
          _this.sysTemplateForm.tplName = response.data.sysTemplate.tplName;
          _this.sysTemplateForm.tplKey = response.data.sysTemplate.tplKey;
          _this.sysTemplateForm.tplContent = response.data.sysTemplate.tplContent;
          _this.sysTemplateForm.remark = response.data.sysTemplate.remark;
          _this.sysTemplateForm.tplId = response.data.sysTemplate.tplId;
          _this.sysTemplateForm.tplType = JSON.stringify(response.data.sysTemplate.tplType);
        }).catch(error => {
          console.log('error!!')
        });
      },
      updateSysPost(sysTemplateForm) {
        var _this = this
        this.$refs[sysTemplateForm].validate((valid) => {
          if (valid) { // 校验表单
            _this.loading = true
            update(_this.sysTemplateForm).then(response => {
              console.log(response);
              _this.loading = false;
              _this.$message({
                message: response.content,
                offset: 120,
                center: true
              });
              EventBus.$emit('sysTemplate-edit', response.data)
              _this.$store.dispatch('tagsView/delView', _this.$route).then(({ visitedViews }) => {
                _this.$router.push({
                  path: '/sysTemplate/list'
                })
              })// 关闭当前tab回到列表
            }).catch(error => {
              _this.loading = false;
              console.log('error!!')
            });
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    },
  }
</script>
<style scoped>
  .el-headerBox {
    height: 50px !important;
    border-bottom: 1px solid #eee !important;
    line-height: 50px !important;
  }
  .addBotton{

  }
  .el-headerTitle{
    font-size: 20px;
    color: #409EFF;
  }
</style>
